<script setup>
import {onMounted, ref} from "vue";
import {Plus} from "@element-plus/icons-vue";
import {ElMessage, ElNotification} from "element-plus";
import {baseUrl} from "@/utils/request";
import {getUserInfo, updateUserInfo} from "@/api/user.js";
const uploadUrl = ref(baseUrl + '/file/upload');

onMounted(() => {
  // 从LocalStorage中获取用户信息
  const user = ref(JSON.parse(localStorage.getItem("user")));
  // 将用户信息赋值给formData
  formData.value.id = user.value.id;
  formData.value.username = user.value.username;
  formData.value.nickname = user.value.nickname;
  formData.value.avatar = user.value.avatar;
  formData.value.password = user.value.password;
});

const formData = ref({});

const handleAvatarSuccess = (response) => {
  if (response) {
    console.log(response);
    formData.value.avatar = response.data;
    console.log(formData.value.avatar);
    ElNotification({
      title: '上传成功',
      message: '图片上传成功',
      type:'success'
    });
  }
};

const handleAvatarError = (error) => {
  console.log(error);
  ElNotification({
    title: '上传失败',
    message: '图片上传失败',
    type: 'error'
  });
}

const beforeAvatarUpload = (rawFile) => {
  const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
  if (!allowedTypes.includes(rawFile.type)) {
    ElMessage.error('头像图片必须是 JPG、JPEG、PNG、GIF 格式！')
    return false
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error('头像图片大小不能超过 5MB！')
    return false
  }
  return true
}
const updateUser = () => {
  // 发送请求更新用户信息
  updateUserInfo(formData.value).then(response => {
    if (response.code === 200) {
      ElNotification({
        title: '更新成功',
        message: '更新用户信息成功',
        type:'success'
      });
      getUserInfo().then(response => {
        if (response.code === 200) {
          // 更新LocalStorage中的用户信息
          localStorage.setItem("user", JSON.stringify(response.data));
        }
      });
    } else {
      ElNotification({
        title: '更新失败',
        message: '更新用户信息失败',
        type: 'error'
      });
    }
  }).catch(error => {
    ElNotification({
      title: '更新失败',
      message: '更新用户信息失败',
      type: 'error'
    });
  })

}
</script>

<template>
  <div>
    <el-row>
      <el-col :span="12" :offset="6">
        <el-card>
          <div class="title">用户信息</div>
          <div class="content-item">
            <el-text class="item-text">头像:</el-text>
            <el-upload
                class="avatar-uploader"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :on-error="handleAvatarError"
                :before-upload="beforeAvatarUpload"
                accept="image/jpeg,image/jpg,image/png,image/gif"
            >
              <img v-if="formData.avatar" :src="formData.avatar" class="avatar" alt="" width="100px" height="100px"/>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
          </div>
          <div class="content-item">
            <el-text class="item-text">用户名:</el-text>
            <el-text type="primary" class="item-text">{{ formData.username }}</el-text>
          </div>
          <div class="content-item">
            <el-text class="item-text">昵称:</el-text>
            <el-input class="item-input" v-model="formData.nickname"></el-input>
          </div>
          <div class="content-item">
            <el-text class="item-text">密码:</el-text>
            <el-input type="password" show-password class="item-input" v-model="formData.password"></el-input>
          </div>
          <div class="content-item">
            <el-button type="primary" @click="updateUser">更新信息</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<style scoped>
.title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 40px;
  text-align: center;
}

.content-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.content-item > .item-text {
  font-size: 24px;
  margin-right: 20px;
}

.content-item > .item-input {
  width: 300px;
}
</style>
